import {
    Box,
    ListItemAvatar,
    ListItemButton,
    ListItemButtonProps,
    ListItemIcon,
    ListItemText,
    styled
} from "@mui/material";
import {CSSProperties, FC, ReactNode} from "react";
import DGTextView from "./DGTextView.tsx";
import DGAvatar from "./DGAvatar.tsx";
import DGGrowView from "./DGGrowView.tsx";

interface MyDGListViewItemProps extends ListItemButtonProps {
    bg?: boolean
}

const MyDGListViewItem = styled(ListItemButton, {
    shouldForwardProp: (prop) => prop !== 'bg'
})<MyDGListViewItemProps>((
    {
        theme, bg,
    }) => {
    const mode = theme.palette.mode === "light";
    return {
        "&": {
            minHeight: "60px",
            paddingLeft: "20px",
            color: mode ? "black" : "#EDEDED",
            backgroundColor: bg ? mode ? "#EDEDED" : "#EDEDED11" : "none",
        },
        "&:hover": {
            backgroundColor: bg ? mode ? "#EDEDED" : "#EDEDED11" : mode ? "transparent" : "transparent",
        },
        "&.Mui-selected": {
            backgroundColor: mode ? "#EDEDED" : "#EDEDED11",
            "&:hover": {
                backgroundColor: mode ? "#EDEDED" : "#EDEDED11",
            },
        },
    }
});

interface DGListViewItemProps extends ListItemButtonProps {
    children?: ReactNode,
    Background?: boolean,
    icon?: ReactNode | string,
    title?: string,
    subText?: string,
    rIcon?: ReactNode,
    onClick?: () => void,
    selected?: boolean,
    disabled?: boolean,
    className?: string | undefined,
    style?: CSSProperties | undefined,
    avatar?: string | null,
    animation?: boolean,
    time?: number,
}

const DGListViewItem: FC<DGListViewItemProps> = (
    {
        children,
        icon,
        title,
        subText,
        rIcon,
        Background,
        animation,
        time,
        avatar,
        ...other
    }) => {

    const ContentView = (<MyDGListViewItem bg={Background} {...other}>
        {/* 头像图标 */}
        {avatar && <ListItemAvatar><DGAvatar alt=" " src={avatar} bgBlue rounded/></ListItemAvatar>}
        {/* 列表图标（纯文字） */}
        {icon && typeof icon === "string" && <ListItemAvatar>
            <DGAvatar bgBlue rounded>{icon}</DGAvatar>
        </ListItemAvatar>}
        {/* 列表图标（图标样式） */}
        {icon && typeof icon !== "string" && <ListItemIcon>{icon}</ListItemIcon>}
        {/* 右侧部分 */}
        <Box style={{width: "100%", display: "flex", flexDirection: "row", alignItems: "center"}}>
            {/* 标题和副标题 */}
            <ListItemText primary={title} secondary={subText}/>
            {/* 右侧显示内容 */}
            <DGTextView variant="subtitle2" color="text.secondary">{children}</DGTextView>
            {/* 右侧图标 */}
            {rIcon}
        </Box>
    </MyDGListViewItem>);

    return (<>
        {animation && <DGGrowView time={time}>{ContentView}</DGGrowView>}
        {!animation && <>{ContentView}</>}
    </>);
}
export default DGListViewItem;